<template>
    <div class="liu">
        <van-notice-bar
                :text="'本周管理员:'+manager.thisWeek+',下周:'+manager.nextWeek"
                left-icon="volume-o"
        />
        <Tabs>
            <TabPane :label="today+'打卡'" name="name1">
                <div class="record-wrapper" v-for="(record,index) in todayList" :key="index">
                    <div class="item-wrapper">
                        <div class="item">
                            <span>{{record.name}}</span>
                            <a href="javascript:void(0);" @click="present(record)">打卡</a>
                        </div>
                    </div>
                </div>
            </TabPane>
            <TabPane label="昨日未打卡" name="name2">
                <div class="record-wrapper" v-for="(record,index) in yesterdayList" :key="index">
                    <div class="item-wrapper">
                        <div class="item">
                            <span style="color: red">{{record.name}}</span>
                        </div>
                    </div>
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    // 在http.js中引入axios
    import axios from 'axios'; // 引入axios

    export default {
        name: 'app',
        data() {
            return {
                manager: {
                    thisWeek: '',
                    nextWeek: ''
                },
                today: '',
                yesterday: '',
                todayList: [],
                yesterdayList: [],
            }
        },

        created() {
            this.getDay();
            //获取今天记录
            this.getNotList(this.today, "today");
            //获取昨日打卡记录
            this.getNotList(this.yesterday, "yesterday");
            //获取管理员
            this.getManager();
        },
        computed: {},
        methods: {
            present(record) {
                this.$Modal.confirm({
                    title: '确认打卡',
                    content: record.name,
                    onOk: () => {
                        this.$Loading.start();
                        record.day = this.today
                        this.clock(record);
                    }
                })
            },
            getDay() {
                let date = new Date();
                let hour = date.getHours();
                if (hour > 2) {
                    this.today = date.getFullYear() + '-' + this.dateForm(date.getMonth() + 1) + '-' + this.dateForm(date.getDate());
                    date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
                    this.yesterday = date.getFullYear() + "-" + this.dateForm(date.getMonth() + 1) + "-" + this.dateForm(date.getDate());
                } else {
                    date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
                    this.today = date.getFullYear() + '-' + this.dateForm(date.getMonth() + 1) + '-' + this.dateForm(date.getDate());
                    date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
                    this.yesterday = date.getFullYear() + "-" + this.dateForm(date.getMonth() + 1) + "-" + this.dateForm(date.getDate());
                }
            },
            dateForm(date) {
                return (date < 10 ? ('0' + date) : date);
            },
            //获取列表
            getNotList(day, type) {
                axios.post("/api/record/getNotByDay", {day: day}).then((res) => {
                    if (type == 'today')
                        this.todayList = res.data.data
                    else {
                        this.yesterdayList = res.data.data;
                    }
                }).catch(err => window.console.log(err))
            },
            getManager() {
                axios.post("/api/user/getManager", null).then(res => {
                    this.manager = res.data.data;
                })
            },
            //打卡
            clock(record) {
                axios.post("/api/record/clock", record).then(() => {
                    this.$Loading.finish();
                    this.getNotList(this.today, 'today');
                }).catch(() => {
                    this.$Loading.finish();
                })
            }
        }
    }
</script>

<style>
    .item-wrapper {
        border-top: 1px solid #eeeeee;
    }

    .item {
        font-size: 18px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        margin: 0 auto;
    }

    .start {
        color: green;
    }
</style>
